<!--评论模板-->
<div>
    <h3 class="commet_count"><span class="commet_count_num">{{totalCount||0}}</span>条评论</h3>
    <!--//输入框-->
    <div class="comm_header">
        <div style="overflow: hidden;padding: 20px 0">
            <div class="comm_hot_phto"><p><img src="{{item.userIcon}}"></p></div>
            <div class="comm_input"><input id="commeInputs" type="text" placeholder="{{commeInputs}}"></div>
        </div>
        <div class="comm_heade_btn" style="padding: 0 0 15px 8%;">
            <!--头部输入框上传图片-->
            <div style="float:left">
                <div style="width: 50px;" class="inputBg">
                    <!-- 图片选择框 -->
                    <form>
                        <input id="file" type="file" onchange='PreviewImage(this)'  class="uploadInput" accept="image/*;capture=camera" multiple/>
                    </form>
                    <!-- 图片展示容器 -->
                    <div class="img-cont imgCont"></div>
                </div>
            </div>
            <button ng-click="sendComFistBtn()">发表</button>
            <img ng-src="{{imageSrc}}" style="max-width:300px;max-height:300px;margin:0 auto;display:block;" />
        </div>
    </div>
    <!--评论头部-->
    <div>
        <div>
            <div class="comm_nav_box">
                <div class="comm_hot">
                    <div class="comm_hot_tit com_fir">
                        <!--<div ng-click="getNewCom()" class="detailActComm"><span>最新评论</span></div>-->
                        <a ng-click="getNewCom()" href="">最新评论</a>
                    </div>
                    <div class="comm_hot_tit">
                        <a ng-click="getHotCom()" href="">热门评论</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--评论内容-->
    <div class="comm_hot_con">
        <!--根据点击热门和最新不同来调用不同接口----循环内容热门评论-->
        <div ng-repeat="item in commenCon track by $index " class="comm_repeat" comm-repeat-finish>
            <div class="comm_hot_phto"><p><img ng-if="item.userID>0" src="{{item.userIcon}}"><img ng-if="item.userID==0" src="static/photo.png"><img ng-if="item.userID<0" src="{{siteConfigDefaultIcon}}"></p></div>
            <div class="comm_hot_conts">
                <div class="comm_hot_main" style="margin-bottom: 20px">
                    <div class="commt_con"><a ng-if="item.userID>=0" class="complUserName">{{item.userName}}</a><a ng-if="item.userID<0" class="complUserName">{{defaultName}}</a><span class="complUserTime">{{item.created|actHour}}</span></div>
                    <div style="margin-top: 15px;color: #333333;">{{item.content}}</div>
                    <div ng-if="item.attachments[0].url" class="comm_hot_conts_img">
                        <img ng-src="{{item.attachments[0].url}}">
                    </div>
                    <div class="comm_interact">
                        <p class="comm_interact_lf"><a href="" ng-click="reportCom($event,item.userName)">举报</a></p>
                        <div class="comm_interact_rt">
                            <p ng-click="commPraiseAdd($event,$index,item.id)" class="comm_interact_rt_icon">
                                <span><img src="static/thub.png"></span>
                                <span style="margin-left: 10px" class="commInteractPrasCount">{{item.countPraise||0}}</span>
                            </p>
                            <p class="comm_interact_rt_replay"><a href=""  ng-click="replayCom($event,item.userName)">回复</a></p>
                        </div>
                    </div>
                    <!--点击回复按钮输入框显示与隐藏-->
                    <div class="comm_con_input_par hideInput">
                        <div class="comm_input_par"><input type="text"></div>
                        <div class="comm_heade_btn">
                            <!--<input type="file" file-model="myFile"/>-->
                            <button ng-click="par_input_send($event,item.id,item.userName,item.userID)">发表</button>
                            <img ng-src="{{imageSrc}}" style="max-width:300px;max-height:300px;margin:0 auto;display:block;" />
                            <!--主评论的输入框上传图片-->
                            <div style="float:left">
                                <div style="width: 50px;" class="inputBg">
                                    <!-- 图片选择框 id="file" -->
                                    <form>
                                        <input type="file" onchange='PreviewImage(this)'  class="uploadInput" accept="image/*;capture=camera" multiple/>
                                    </form>
                                    <!-- 图片展示容器 -->
                                    <div class="img-cont imgCont"></div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!--点击举报文本域-->
                    <div class="reportComText hideTextarea">
                        <textarea name="" id=""  style="padding: 15px;width:100%;height: 100px;margin: 15px 0 "></textarea>
                        <button ng-click="par_input_port_send($event,item.id,item.userName,item.userID)">提交</button>
                    </div>
                </div>
                <!--回复-->
                <div ng-repeat="reply in item.topDiscuss.list" class="comm_hot_reply" comm-repeat-finish>
                    <div >
                        <div id="commt_com_repla"><a ng-if="reply.userID>=0">{{reply.userName}}</a><a ng-if="reply.userID<0">{{defaultName}}</a></div>
                        <div ng-click="replayCom(reply.id,reply.userName)" class="commt_com_repla_con">{{reply.content}}</div>
                    </div>
                    <div class="comm_interact">
                        <p class="comm_interact_lf"><a href="" ng-click="reportComReplay($event,reply.userName)">举报</a></p>
                        <div class="comm_interact_rt">
                            <p ng-click="commPraiseAddChild($event,$index,reply.id)" class="comm_interact_rt_icon"><span><img src="static/thub.png"></span><span style="margin-left: 10px">{{item.countPraise||0}}</span></p>
                            <p class="comm_interact_rt_replay"><a href="" ng-click="replayCom($event,reply.userName)">回复</a></p>
                        </div>
                    </div>
                    <div ng-if="reply.attachments[0].url" class="comm_hot_conts_img">
                        <img ng-src="{{reply.attachments[0].url}}">
                    </div>
                    <!--输入框显示与隐藏-->
                    <div class="comm_con_input_par hideInput">
                        <div class="comm_input_par"><input type="text"></div>
                        <div class="comm_heade_btn">
                            <button ng-click="par_input_send($event,reply.id,reply.userName,reply.userID)">发表</button>
                            <!--回复的回复的输入框上传图片-->
                            <div style="float:left">
                                <div style="width: 50px;" class="inputBg">
                                    <!-- 图片选择框 id="file" -->
                                    <form>
                                        <input type="file" onchange='PreviewImage(this)'  class="uploadInput" accept="image/*;capture=camera" multiple/>
                                    </form>
                                    <!-- 图片展示容器 -->
                                    <div class="img-cont imgCont"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--点击举报文本域-->
                    <div class="reportComTextReply hideTextarea">
                        <textarea name="" style="padding: 15px;width:100%;height: 100px;margin: 15px 0 "></textarea>
                        <button ng-click="par_input_port_send($event,reply.id,reply.userName,reply.userID)">提交</button>
                    </div>
                </div>
                <div ng-if="item.topDiscuss.list.length>2&&lunchaMorChilCom" ng-click="checkMorChildCom(item.id,$index)" class="com-childen-more">更多{{item.topDiscuss.list.length}}条回复 <span class="glyphicon glyphicon-chevron-right"></span></div>
                <div ng-if="item.topDiscuss.list.length>2&&hasChildMorCom.index" class="com-childen-more">更多评论回复</div>
                <!--<div ng-if="item.topDiscuss.list.length>=2&&hasNoChildMorCom.index" class="com-childen-more">没有更多评论回复</div>-->
            </div>
        </div>
    </div>
    <!--评论模态框-->
    <!--<div id="commentModle" class="commentMod">-->

    <!--</div>-->
    <div style="margin:0.3rem">
        <button ng-if="hasMorCom" ng-click="LoadMoreCom()" style=" background: #FCA204;padding:0.1rem 0.2rem;margin: 0 auto;display: block;color: #ffffff;border: none;">加载更多 <img herf=""></button>
        <button disabled ng-if="!hasMorCom" style=" background: #FCA204;padding:0.1rem 0.2rem;margin: 0 auto;display: block;color: #ffffff;border: none;">没有更多评论</button>
    </div>
</div>

<style>
    /*图片背景*/
    .inputBg{
        background-image:url("static/52.png");
        /*background-size:30px 30px;*/
        background-repeat:no-repeat,no-repeat,no-repeat;
    }
    /*评论上传图片*/
    .uploadInput{
        padding: 0;
        height: 30px;
        width: 50px;
        opacity: 0;
    }
    .img-cont{
        width:200px;
        /*height: 100px;*/
        overflow: hidden;
        position: absolute;
        left: 8%;
    }

    .img-cont>div{
        position: relative;
        width:100%;
        height:100%;
        /*border:1px solid #777;*/
        float:left;
    }

    .img-cont>div>a{
        width:60px;
        height:30px;
        border-radius:4px;
        line-height: 30px;
        text-align: center;
        color:#fff;
        display: block;
        background: #317ef3;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
    }
    /*评论图片*/
    .comm_hot_conts_img{
        width: 50%;
        height: 150px;

    }
    .comm_hot_conts_img_replay{
        box-sizing: content-box;
        padding: 0 0 15px 0;
        width:50%;
        /*height:7.28rem;*/
    }
    .comm_hot_conts_img img,.comm_hot_conts_img_replay img{
        /*width: 100%;*/
        height: 100%;
    }
    /*评论comment*/
    .comm_input{
        width: 92%;
        float: right;
    }
    .comm_input input{

        width: 100%;
        height: 45px;
        line-height: 45px;
        border: 1px solid #000000;
    }
    .comment{
        padding: 10px 15px;
        position: fixed;
        bottom: 0;
        width: 100%;;
        z-index: 20;
        display: none;
    }
    .comBtnOne{
        background: #ffffff;
        margin-left: 0;
        color: #666666;
        border:1px solid #e3e3e3;
    }
    .comBtnTwo{
        float: right;
        background: #ffffff;
        color: #fc9105;
        border:1px solid #fc9105;
    }
    .comment form{
        float: left;
        width: 60%;
    }
    .comment .conmReview{
        padding: 10px 0;
    }
    .comm_revi{
        overflow: hidden;
    }
    .conmReview .comm_tit{
        float: left;
    }
    .conmReview .comm_num{
        float: right;
    }
    .conmReview .comm_num .comm_count{
        color: red;
    }
    .conmReview_btn{
        text-align: left;
    }
    .conmReview_btn button{
        margin-left: 10%;
    }
    .comm_hot{
        overflow: hidden;
    }
    .comm_hot_tit{
        float: left;
        height: 100%;
    }
    .comm_hot_tit{
        width: 50%;
    }
    .comm_hot_tit a{
        height: 100%;
        display: block;
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px solid #e3e3e3;
        color: #333333;
        font-size: 15px;
    }
    .com_fir{
        text-align: right;
    }
    .comm_hot_con{
        padding: 0 15px 0 15px;
    }
    .comm_repeat{
        overflow: hidden;
        margin-top: 15px;
        padding-bottom: 15px;
        border-bottom:1px solid #e3e3e3;
    }
    .comm_hot_phto,.comm_hot_conts{
        float: left;
    }
    .comm_hot_phto p{
        width: 33px;
        height: 33px;
        border-radius: 50%;
        overflow: hidden;
    }
    .comm_hot_phto p img{
        width: 100%;
        height: 100%;
    }
    .comm_hot_phto{
        width: 8%;
        margin-top: 7px;
    }
    .comm_hot_conts{
        width: 90%;
    }
    .commt_con{
        position: relative;
        color: #999999;
    }
    .commt_con a{
        margin-right: 10px;
    }
    .commt_con_icon{
        padding: 10px 0;
    }
    .com_hot_thumb{
        margin-left: 60%;
    }
    .comm_hot_reply{
        background:#f6f6f6;
        padding: 10px 10px 0 10px;

    }
    .new_comments{
        padding: 10px 15px;
    }
    /*详情页展开全文*/
    .detailsHidde{
        overflow: hidden;
        max-height: 500px;
    }
    .complUserName{
        color: #999999;
        font-size: 14px;
    }
    .complUserTime{
        color: #999999;
        font-size: 13px;
        position: absolute;
        right: 0;
    }
    #commt_com_repla a{
        color: #999999;
        font-size: 13px;

    }
    .commt_com_repla_con{
        color: #666666;
        font-size: 14px;
        padding: 10px 0;
    }
    .com-more{
        background:#f6f6f6;
        color: #333333;
        font-size: 14px;
    }
    .com-more img{
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform:scale(0.5);
        -o-transform: scale(0.5);
    }
    /*更多子评论*/
    .com-childen-more{
        font-size: 15px;
        color: #fc9105;
        background: #f6f6f6;
        padding: 10px;
    }
    .comm_text_footer{
        color: #cccccc;
        font-size: 13px;
        background: #ededed;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 10;
    }
    .com-footer-left{
        display: inline-block;
        height:100%;
        width: 80%;
        background: #ffffff;
        border-radius: 4px;
        margin-right: 5%;
    }
    .com-footer-left img{
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform:scale(0.5);
        -o-transform: scale(0.5);
    }
    .com-footer-left input{
        outline: none;
        border: none;
    }
    /*评论模态框*/
    .commentMod{
        z-index: 15;
        opacity: 0.3;
        filter: alpha(opacity=30);
        filter: alpha(opacity=30);
        top: 0;
        background: #000;
        position: absolute;
        width: 100%;
        height: 100%;
        display: none;
    }
    .comm_heade_btn{
        overflow: hidden;padding: 0 0 15px 0
    }
    .comm_heade_btn button,.reportComText button,.reportComTextReply button{
        float:right;
        padding: 5px 15px;
        background: #000;
        color: #ffffff;
        border: none;
    }
    .comm_input_par{
        width: 100%;
        padding: 20px 0;
    }
    .comm_input_par input{
        height: 40px;
        width: 100%;
    }
    .comm_interact{
        overflow: hidden;
       padding-top:20px;
    }
    .comm_interact_lf{
        float:left;
    }
    .comm_interact_rt{
        float:right;
        overflow: hidden;
        width: 100px;
    }
    .comm_interact_rt_replay{
        float: right;
    }
    .comm_interact_rt_icon{
        float: left;
        cursor: pointer;
    }
    .commet_count{
        padding: 15px;
    }
    .commet_count span{
        color: #fc9105;
        padding-left: 0.1rem;
    }
    .comm_header{
        padding:0 15px;
        position: relative;
    }
    .reportComText,.reportComTextReply{
        overflow: hidden;
    }
    input{
        padding: 0 15px;
    }
</style>
<script  src="trd/imgUpload/index.js"></script>
<script>

    //////定义上传方法函数
    var id="1";
    function PreviewImage(imgFile) {

        console.log(uploadFile)
        var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
        if(!pattern.test(imgFile.value)) {
            alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");
            imgFile.focus();
        }else{
            console.log("获取当前对象")
            console.log($(imgFile).parent().parent().children().find(".imgCont").prevObject[1]);
            var currentImgCont=$(imgFile).parent().parent().children().find(".imgCont").prevObject[1];
            console.log("当前图片对象");
            console.log($(imgFile).parent().parent().find('.uploadInput')[0]);
            var currentUploadInput=$(imgFile).parent().parent().find('.uploadInput')[0];
//            //定义图片路径
//            var path;
//            //添加显示图片的HTML元素
//            id += 1;
//            $(".img-cont").append("<div><div id='"+id+"'><img src='' /></div><a class='hide delete-btn'>删除</a></div>");

            //定义图片路径
            var path;
            //添加显示图片的HTML元素
            id += 1;
            $(currentImgCont).append("<div><div id='"+id+"'><img src='' /></div><a class='delete-btn' onclick='doRemove(this)'>删除</a></div>");
            $(currentUploadInput).attr("disabled", "disabled");
            //判断浏览器类型
            if(document.all){
                //兼容IE
                imgFile.select();
                path = document.selection.createRange().text;
                document.getElementById(id).innerHTML="";
                document.getElementById(id).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果

            }else{
                //兼容其他浏览器
                path = URL.createObjectURL(imgFile.files[0]);
                console.log("path")
                console.log(path)
                document.getElementById(id).innerHTML = "<img src='"+path+"' width='100%' height='100%' />";
            }

            uploadFile=imgFile.files[0];
            console.log(uploadFile);
            console.log(uploadFile)
        }
    }



//    //控制"按钮"显示与隐藏
//    $(".img-cont").off("mouseenter","div").on("mouseenter","div",function(){
//        var that=this;
//        var dom=$(that).children("a");
//        dom.removeClass("hide");
//        //为点击事件解绑，防止重复执行
//        dom.off("click");
//        dom.on("click",function(){
//            alert("删除")
//            console.log(dom)
//            //删除当前图片
//            dom.parent().remove();
//            $("#file").attr("disabled", false);
//        });
//    }).off("mouseleave","div").on("mouseleave","div",function(){
//        var that=this;
//        $(that).children("a").addClass("hide");
//    })

    doRemove=function(arg){
        console.log($(arg).parent().parent().parent().find("input"))
        var uploadInput=$(arg).parent().parent().parent().find("input");
        console.log(uploadInput)
        $(uploadInput).attr("disabled", false);
        $(arg).parent().remove();

    }


</script>

